// 获取数据并渲染
function renderCategory() {
    $.ajax({
        url: '/my/category/list',
        success: function (res) {
            let arr = []
            res.data.forEach(item => {
                arr.push(`<tr>
                <td>${item.name}</td>
                <td>${item.alias}</td>
                <td>
                    <button type="button" class="layui-btn layui-btn-xs" data-id='${item.id}' data-name='${item.name}' data-alias='${item.alias}'>编辑</button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
                </td>
            </tr>`)
            })
            $('tbody').html(arr.join(""))
        }
    })
}
renderCategory()

// 添加分类
// 1.点击按钮出现弹层
let addTan
let form = layui.form
$('button:contains("添加类别")').on('click', function () {
    addTan = layer.open({
        type: 1,
        title: '添加类别'
        , content: $('#tpl-add').html(),
        area: ['500px', '250px']
    });

})
// 2.表单提交，提交数据
$('body').on('submit', '#add-form', function (e) {
    e.preventDefault()
    $.ajax({
        type: 'POST',
        url: '/my/category/add',
        data: $(this).serialize(),
        success: function (res) {
            layer.msg(res.message)
            if (res.status === 0) {
                renderCategory()
                layer.close(addTan)
            }
        }
    })
})

// 修改类别
// 1.出现弹层
let editTan
$('tbody').on('click', 'button:contains("编辑")', function () {
    let data = $(this).data()
    editTan = layer.open({
        type: 1,
        title: '编辑类别'
        , content: $('#tpl-edit').html(),
        area: ['500px', '250px'],
        success: function () {
            // 2.数据回填
            form.val('edit', data)
        }
    });
})
// 3.完成修改
$('body').on('submit', '#edit-form', function (e) {
    e.preventDefault()
    let shuju = $(this).serialize()
    $.ajax({
        type: 'POST',
        url: '/my/category/update',
        data: shuju,
        success: function (res) {
            layer.msg(res.message)
            if (res.status === 0) {
                renderCategory()
                layer.close(editTan)
            }
        }
    })
})